<template>
	<div style="float:left;">
		<el-menu
		  :default-active="activeIndex2"
		  class="el-main-menu"
		  mode="horizontal"
		  @select="handleSelect"
		  background-color="#545c64"
		  text-color="#fff"
		  active-text-color="#ffd04b">
		  <el-menu-item index="1">系统管理</el-menu-item>
		  <el-menu-item index="2">人事管理</el-menu-item>
		  <el-menu-item index="3">运营管理</el-menu-item>
		  <el-menu-item index="4">商品管理</el-menu-item>
		  <el-menu-item index="5">产品管理</el-menu-item>
	<!-- 	  <el-submenu index="6">
		    <template slot="title">我的工作台</template>
		    <el-menu-item index="6-1">选项1</el-menu-item>
		    <el-menu-item index="6-2">选项2</el-menu-item>
		    <el-menu-item index="6-3">选项3</el-menu-item>
		    <el-submenu index="6-4">
		      <template slot="title">选项4</template>
		      <el-menu-item index="6-4-1">选项1</el-menu-item>
		      <el-menu-item index="6-4-2">选项2</el-menu-item>
		      <el-menu-item index="6-4-3">选项3</el-menu-item>
		    </el-submenu>
		  </el-submenu> -->
<!-- 		  <el-menu-item index="7" disabled>消息中心</el-menu-item>
 -->		<!--   <el-menu-item index="8"><a href="https://www.ele.me" target="_blank">订单管理</a></el-menu-item> -->
		</el-menu>
	</div>
</template>

<script>
  export default {
    data() {
      return {
        activeIndex: '1',
        activeIndex2: '1'
      };
    },
    methods: {
      handleSelect(key, keyPath) {
        console.log(key, keyPath);
      }
    }
  }
</script>

<style type="text/css" media="screen">
  .el-main-menu {
  	float: left;
  	width: 600px;
  }	
</style>